<template>
	<view class="dSLComVue bg_fff">

		<view class="dSLComVueTop">
			<view class="dSLComVueTopLeft">
				<u-icon name="search"></u-icon>
				<input class="dSLComVueTopLeftInput" v-model="search_input" type="text" :placeholder="placeholder"
					confirm-type="search" @confirm="ok" />
			</view>
			<view class="dSLComVueTopRight">
				<view class="display_row_btn_center" @click="showMore">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84%E8%B4%A6%E5%8F%B7/%E8%B4%A7%E5%93%81%E7%B1%BB%E5%9E%8B-01.png"
						width="16px" height="16px">
					</u-image>
					<text class="c_C62B2C f_28">筛选</text>
				</view>
			</view>
		</view>

		<view v-if="is_show_more" class="dSLComVue">
			<block v-for="(list,index1) in search_list" :key="index1">
				<view class="dSLComVueTitle">
					<text>{{list.name}}</text>
				</view>
				<view class="dSLComVueLog" v-if="search_list.length>0">
					<text class="dSLComVueLogBox mytext" :class='{"active":checkSelect(list.flag,item.id)}'
						v-for="(item,index2) in list.data" :key="index2" @click="selectData(list.flag,item.id)">
						{{item.name}}
					</text>
				</view>
			</block>
			<view class="display_row_btn_center btnbox">
				<text class="reset" @click="reset">重置</text><text class="ok" @click="ok">完成</text>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		name: 'm-search',
		data() {
			return {
				// search_list: [],
				search_input: '',
				is_show_more: false,
				flag: "",
				id: "",
				choiseData: {}
			}
		},
		created() {},
		props: {
			search_list: {
				value: Array,
				default: []
			},
			//HM修改 定义默认搜索关键词(水印文字)
			placeholder: {
				value: String,
				default: '请输入搜索内容'
			}
		},
		methods: {
			reset() {
				this.choiseData = {};
				this.search_input = '';
			},
			ok() {
				this.is_show_more = false;
				this.$emit("search", {
					choiseData: this.choiseData,
					search_input: this.search_input
				});
			},
			checkSelect(flag, id) {
				return this.choiseData[flag] == id;
			},
			selectData(flag, id) {
				this.flag = flag;
				this.id = id;
				this.choiseData[flag] = id;
			},
			showMore() {
				this.is_show_more = !this.is_show_more;
			}
		}
	}
</script>

<style lang="scss">
	.myborder {
		border: 1rpx solid #60DF9D;
		color: #30c66c;
	}

	.mytext {
		color: #8799a3;
	}

	.dSLComVue {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 0;

		.dSLComVueTop {
			width: 90%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 40rpx;

			.dSLComVueTopLeft {
				flex: 1;
				height: 60rpx;
				background-color: #e8e8e8;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 3%;
				// background-color: #ccc;
				border: 1rpx solid #f2f2f2;

				.dSLComVueTopLeftImg {
					flex: 1;
					height: 80rpx;
				}

				.dSLComVueTopLeftInput {
					flex: 1;
					height: 60rpx;
					padding: 0 20rpx;

				}

				.dSLComVueTopLeftDel {
					width: 70rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.dSLComVueTopRight {
				width: 120rpx;
				margin-left: 10rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					margin-left: 10rpx;
				}
			}

		}

		.dSLComVueTitle {
			width: 100%;
			display: flex;
			font-weight: 600;
			font-size: 32rpx;
			align-items: center;
			// background-color: #30c66c;
			align-items: center;
			justify-content: space-between;
			padding-left: 5%;
		}

		.dSLComVueLog {
			width: 90%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.dSLComVueLogBox {
				line-height: 55rpx;
				background-color: #e8e8e8;
				padding: 0rpx 30rpx;
				border-radius: 10rpx;
				flex: none;
				margin: 10rpx 25rpx 15rpx 0;
				// border: 1rpx solid #ccc
			}


		}
	}

	.active {
		background-color: #FE7C71 !important;
		color: #fff;
	}

	.btnbox {
		width: 90%;
		box-sizing: border-box;
		margin-left: 5%;
	}

	.reset {
		width: 45%;
		line-height: 55rpx;
		padding: 10rpx 0;
		background-color: #e8e8e8;
		text-align: center;
		border-radius: 10rpx;
		color: #8799a3;
	}

	.ok {
		width: 45%;
		line-height: 55rpx;
		padding: 10rpx 0;
		background-color: #C62B2C;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
	}
</style>
